<template>
  <div class="video-zone">
    <Navbar title="视频专区" />
    <van-tabs v-model:active="curTab">
      <van-tab title="重点关注" :name="TAB_TYPE.IMPORTANT" />
      <van-tab title="全部视频" :name="TAB_TYPE.ALL" />
    </van-tabs>
    <FavList v-if="TAB_TYPE.IMPORTANT === curTab" @view="handleView" />
    <AllList v-if="TAB_TYPE.ALL === curTab" @view="handleView" @fav="handleFavChange" />
  </div>
  <FloatBtn ref="refFloatBtn" v-if="!showFavPopup && !showPreview" @click="showFavPopup = true" />
  <FavPopup v-model:visible="showFavPopup" :fav-list="[]" />
  <Preview v-model:visible="showPreview" :item="previewData" />
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import VidServe from '@/api/vid.ts'
import Navbar from '@/components/Navbar/index.vue'
import FavPopup from './comp/favPopup.vue'
import FloatBtn from './comp/floatBtn.vue'
import Preview from './comp/preview.vue'
import AllList from './comp/allList.vue'
import FavList from './comp/favList.vue'

const TAB_TYPE = {
  IMPORTANT: 'imp',
  ALL: 'all'
}

const curTab = ref<string>(TAB_TYPE.IMPORTANT)

const route = useRoute()
watch(
  () => route.path,
  (to, from) => {
    console.log(to, from)
    showPreview.value = false
    if (from == '/zone') {
      curTab.value = TAB_TYPE.IMPORTANT
    }
  }
)

const showFavPopup = ref(false)
const showPreview = ref(false)
const previewData = ref<TypeVidItem>(null)

const handleView = (item: TypeVidItem) => {
  previewData.value = item
  showPreview.value = true
}

const refFloatBtn = ref(null)

const handleFavChange = () => {
  refFloatBtn.value?.updateCount()
}
</script>

<style lang="less">
.video-zone {
  display: flex;
  height: 100vh;
  flex-direction: column;
  --van-tabs-bottom-bar-width: 24px;
  .van-tabs__line {
    box-shadow: 0px 2px 2.5px 0px #3a75c533;
  }
  .van-tab--active {
    font-size: 16px;
  }

  .content {
    z-index: 1;
    padding: 0px 12px;

    flex-grow: 1;
    overflow-y: scroll;
  }

  .op-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 12.5px;
  }

  .search-bar {
    border-radius: 25px;
    background: #ffffff;
    height: 32px;
    width: 68px;
    display: flex;
    font-weight: medium;
    align-items: center;
    color: #0000007f;
    font-size: 13px;
    padding-left: 12px;

    img {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }
  }
}
</style>
